<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org" th:fragment="html(title, content)">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title th:text="${title} + ' - 扶贫助农电商平台'">扶贫助农电商平台</title>

    <!-- WebJars -->
    <link th:href="@{/webjars/bootstrap/5.3.0/css/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{/webjars/font-awesome/6.4.0/css/all.min.css}" rel="stylesheet">

    <!-- 自定义全局CSS -->
    <style>
        body {
            padding-top: 72px; /* 为固定的导航栏留出空间，增加以避免内容遮挡 */
        }
        .page-header {
            background: linear-gradient(135deg, #28a745, #20c997);
            color: white;
            padding: 5rem 0;
        }
        .footer {
            background-color: #2c3e50;
            color: white;
            padding: 40px 0;
        }
        .footer a {
            color: #bdc3c7;
            text-decoration: none;
            transition: color 0.3s;
        }
        .footer a:hover {
            color: white;
        }
        .section-title {
            text-align: center;
            margin-bottom: 3rem;
            color: #2c3e50;
        }
        .section-title::after {
            content: '';
            width: 50px;
            height: 3px;
            background: #28a745;
            display: block;
            margin: 10px auto;
        }
    </style>
</head>
<body>
    <!-- 统一导航栏 -->
    <div th:fragment="navbar" class="navbar navbar-expand-lg navbar-dark bg-success fixed-top">
        <div class="container">
            <a class="navbar-brand fw-bold" href="/">
                <i class="fas fa-seedling"></i> 扶贫助农电商平台
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link" th:classappend="${currentUri == '/' ? 'active' : ''}" href="/">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" th:classappend="${#strings.startsWith(currentUri, '/product') ? 'active' : ''}" href="/product/list">产品中心</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" th:classappend="${#strings.startsWith(currentUri, '/news') ? 'active' : ''}" href="/news/list">新闻资讯</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" th:classappend="${#strings.startsWith(currentUri, '/announcement') ? 'active' : ''}" href="/announcement/list">平台公告</a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownAbout" role="button" data-bs-toggle="dropdown" aria-expanded="false"
                           th:classappend="${#strings.startsWith(currentUri, '/company') ? 'active' : ''}">
                            关于我们
                        </a>
                        <ul class="dropdown-menu" aria-labelledby="navbarDropdownAbout">
                            <li><a class="dropdown-item" href="/company/about">企业简介</a></li>
                            <li><a class="dropdown-item" href="/company/contact">联系我们</a></li>
                        </ul>
                    </li>
                </ul>
                <ul class="navbar-nav ms-auto">
                     <li class="nav-item">
                        <a class="nav-link" href="/admin/dashboard" target="_blank">
                            <i class="fas fa-user-shield"></i> 后台管理
                        </a>
                    </li>
                </ul>
                <form class="d-flex" action="/product/search" method="get">
                    <input class="form-control me-2" type="search" name="keyword" placeholder="搜索农产品..." aria-label="Search">
                    <button class="btn btn-outline-light" type="submit">搜索</button>
                </form>
            </div>
        </div>
    </div>

    <!-- 主要内容占位符 -->
    <div th:replace="${content}">
        <!-- 每个页面独有的内容将替换这里 -->
    </div>

    <!-- 统一页脚 -->
    <footer class="footer mt-auto py-5">
        <div class="container">
            <div class="row">
                <div class="col-md-4 mb-3">
                    <h5><i class="fas fa-seedling"></i> <span th:text="${companyInfo?.name}">扶贫助农电商平台</span></h5>
                    <p class="mb-1">连接城乡，助力脱贫</p>
                    <p>让每一份农产品都承载着希望与温暖</p>
                </div>
                <div class="col-md-2 mb-3">
                    <h5>快速链接</h5>
                    <ul class="list-unstyled">
                        <li><a href="/">首页</a></li>
                        <li><a href="/product/list">产品中心</a></li>
                        <li><a href="/news/list">新闻资讯</a></li>
                    </ul>
                </div>
                 <div class="col-md-2 mb-3">
                    <h5><br></h5>
                    <ul class="list-unstyled">
                        <li><a href="/announcement/list">平台公告</a></li>
                        <li><a href="/company/about">关于我们</a></li>
                        <li><a href="/company/contact">联系我们</a></li>
                    </ul>
                </div>
                <div class="col-md-4 mb-3">
                    <h5>联系方式</h5>
                    <p class="mb-1"><i class="fas fa-phone"></i> <span th:text="${companyInfo?.phone}"></span></p>
                    <p class="mb-1"><i class="fas fa-envelope"></i> <span th:text="${companyInfo?.email}"></span></p>
                    <p><i class="fas fa-map-marker-alt"></i> <span th:text="${companyInfo?.address}"></span></p>
                </div>
            </div>
            <hr class="my-4">
            <div class="text-center">
                <p>&copy; <span th:text="${#dates.year(#dates.createNow())}">2024</span> <span th:text="${companyInfo?.name}">扶贫助农电商平台</span>. 版权所有.</p>
            </div>
        </div>
    </footer>

    <!-- JS -->
    <script th:src="@{/webjars/jquery/3.7.0/jquery.min.js}"></script>
    <script th:src="@{/webjars/bootstrap/5.3.0/js/bootstrap.bundle.min.js}"></script>
    <!-- 自定义JS -->
    <script th:src="@{/js/common.js}"></script>
</body>
</html> 